<template>
  <div>
    <div class="content-cen" :class="{isTop: isTop}">
      <el-container class="auto-container center-cnt">
        <el-aside width="240px" class="aside">
          <div class="head-wrap">
            <div class="img-bg">
              <div class="header-img">
                <img
                  src="../../../assets/user.png"
                  alt
                  class="default-img"
                />
              </div>
            </div>
            <p align="center" class="font etc" :title="userName">
              {{ userName }}
            </p>
          </div>
          <ul class="menu">
            <li
              v-for="(item, i) in menuData"
              :key="i"
              @click="menuClick(item)"
              class="menu-list"
              :class="{ active: pageType === item.hash }"
            >
              <i class="icon iconfont" :class="item.icon"></i>
              <div class="menulist-font">{{ item.name }}</div>
            </li>
          </ul>
        </el-aside>
        <div class="container_right">
          <router-view />
        </div>
      </el-container>
    </div>
  </div>
</template>
<script>
var jwt = require("jsonwebtoken");
export default {
  components: {
  },
  data() {
    return {
      isTop: false,
      menuData: [
        // {
        //   name: "基本信息",
        //   icon: "icon-jibenxinxi",
        //   hash: "basicInfo",
        // },
        // {
        //   name: "账户设置",
        //   icon: "icon-zhanghushezhi",
        //   hash: "accountSet",
        // },
        {
          name: "下载中心",
          icon: "icon-zhanghushezhi",
          hash: "downloadCenter",
        },
        // {
        //   name: "个性设置",
        //   icon: "icon-gexingshezhi",
        //   hash: "personalSet",
        // },
        // {
        //   name: "建议与反馈",
        //   icon: "icon-yijianfankui",
        //   hash: "feedback",
        // },
      ],
      headSrc: null,
      userName: '',
      pageType: "BasicInfo",
    };
  },
  methods: {
    menuClick(item) {
      this.pageType = item.hash;
      this.$router.push(this.pageType);
    },
    reload(){
      this.$parent.reload()
    }
  },
  beforeMount() {
    // 判断是否嵌入了iframe
    window.self === window.top ? this.isTop = false : this.isTop = true
  },
  mounted(){
    this.pageType = this.$route.name;
  },
  watch: {
    $route(news, old) {
      this.pageType = this.$route.name;
    },
    
  },
};
</script>
<style lang="scss" scoped >
::v-deep {
  html,body{
    min-height: 100vh;
  }
  .wrap{
    position: relative;
    min-height: 100vh;
  }
}
.privacy-btn {
  font-size: 14px;
}
.content-cen {
  display: flex;
  background: #eef3fa;
  width: 100%;
  box-sizing: border-box;
  min-width: 1240px;
  padding: 0 20px;
  height: 100%;
  font-size: initial;
  &.isTop {
    padding-top: 0;
  }
  .aside {
    background-color: #fff;
    min-height: 100%;
    .head-wrap {
      height: 210px;
      padding: 22px;
      padding-bottom: 0;
      .img-bg {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 152px;
        height: 152px;
        border-radius: 50%;
        margin: 0 auto;
        background: linear-gradient(180deg, #7edcfb, #4f64c9);
        .header-img {
          width: 140px;
          height: 140px;
          border-radius: 50%;
          text-align: center;
          background: #fff;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
          .default-img {
            width: 85% !important;
            height: auto !important;
            margin-top: 4px;
          }
        }
      }
      .font {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
        font-weight: 700;
        margin: 10px 0;
        line-height: 1.5;
      }
    }
    .menu {
      padding: 0;
      margin: 0;
      left: 25px;
      .menu-list {
        display: flex;
        align-items: center;
        height: 60px;
        border-top: 1px solid #eee;
        padding-left: 25px;
        cursor: pointer;
        i {
          width: auto;
          height: auto;
          font-size: 1.5em;
          margin-right: 5px;
          color: #dee1f2;
        }
        &:nth-last-child(1) {
          border-bottom: 1px solid #eee;
        }
        &.active {
          color: #4f63c8;
          i {
            color: #4f63c8;
          }
        }
        .menulist-font {
          font-weight: 800;
          font-size: 12px;
        }
      }
    }
  }
  .container_right {
    min-height: calc(100vh - 80px);
    flex: 1;
    padding: 20px;
    padding-right: 0;
  }
}
</style>